import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import Cookies from 'js-cookie'
import {
  Result,
  List,
  InputItem,
  TextareaItem,
  WhiteSpace,
  Button,
  Modal
} from 'antd-mobile'

import { resetUser } from '../../redux/actions'


export class Personal extends Component {

  static propTypes = {
    user: PropTypes.object.isRequired,
    resetUser: PropTypes.func.isRequired
  }

  Logout = ()=>{
    Modal.alert('退出','确认退出登录吗？',[
      { text: '取消' },
      { text: '确认', onPress:this.confirmLogout},
    ])
  }
  
  confirmLogout = ()=>{
    // 清空本地 Cookie、重置redux的user状态，自动跳转到登录页
    Cookies.remove('userid')
    this.props.resetUser()
  }

  render() {
    const { user } = this.props
    const myImg = <img src={require(`../../assets/images/${user.header}.png`)} alt="" style={{width:'60px',height:'60px'}}/> 
    return (
      <div style={{paddingTop: '45px', paddingBottom: '65px'}}>
        <Result 
          img={myImg}
          title={user.username}
          message={user.company}
        />
        <List renderHeader={()=> '相关信息'}>
          <InputItem labelNumber={3} value={user.type === 'laoban' ? '老板' : '大神'} disabled>身份：</InputItem>
          <InputItem labelNumber={3} value={user.post} disabled>职位：</InputItem>
          { user.salary ? <InputItem labelNumber={3} value={user.salary} disabled>薪资：</InputItem> : null }
          <TextareaItem labelNumber={3} title={user.type === 'laoban' ? '要求：' : '简介：'} value={user.info} autoHeight disabled/>
        </List>
        <WhiteSpace style={{height: '15px'}} />
        <Button type="warning" onClick={this.Logout}>退出登录</Button>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { resetUser }
)(Personal)
